import { computed, defineComponent, ref, watch } from 'vue';
import {
  getEditorEmits,
  getSliderProps,
  useFocusAndBlur,
  useNamespace,
} from '@ibiz-template/vue3-util';
import { toNumber } from 'lodash-es';
import { SliderEditorController } from '../slider-editor.controller';
import './ibiz-slider.scss';

export const IBizSlider = defineComponent({
  name: 'IBizSlider',
  props: getSliderProps<SliderEditorController>(),
  emits: getEditorEmits(),
  setup(props, { emit }) {
    const ns = useNamespace('slider');
    const c = props.controller;
    const editorModel = c.model;

    // 步长
    let step = 1;
    // 设置滑动输入条允许的最大值
    let max = 100;
    // 设置滑动输入条允许的最小值
    let min = 0;
    //  是否显示间断点
    let showStops = false;
    // 是否开启选择范围
    let range = false;
    // 是否显示输入框，仅在非范围选择时有效
    let showInput = false;
    // 是否显示百分比
    let showText = false;
    // 格式化
    let format = '0%';
    if (editorModel.editorParams) {
      if (editorModel.editorParams.stepvalue) {
        step = toNumber(editorModel.editorParams.stepvalue);
      }
      if (editorModel.editorParams.maxvalue) {
        max = toNumber(editorModel.editorParams.maxvalue);
      }
      if (editorModel.editorParams.minvalue) {
        min = toNumber(editorModel.editorParams.minvalue);
      }
      if (editorModel.editorParams.showstops) {
        showStops = c.toBoolean(editorModel.editorParams.showstops);
      }
      if (editorModel.editorParams.range) {
        range = c.toBoolean(editorModel.editorParams.range);
      }
      if (editorModel.editorParams.showinput) {
        showInput = c.toBoolean(editorModel.editorParams.showinput);
      }
      if (editorModel.editorParams.showText) {
        showText = c.toBoolean(editorModel.editorParams.showText);
      }
      if (editorModel.editorParams.format) {
        format = editorModel.editorParams.format;
      }
    }

    // 是否显示表单默认内容
    const showFormDefaultContent = computed(() => {
      if (
        props.controlParams &&
        props.controlParams.editmode === 'hover' &&
        !props.readonly
      ) {
        return true;
      }
      return false;
    });

    // 当前值
    const currentVal = ref<number | Array<number>>();
    watch(
      () => props.value,
      (newVal, oldVal) => {
        if (newVal !== oldVal) {
          if (newVal === null || newVal === undefined) {
            // 如果是范围给数组
            if (range) {
              currentVal.value = [0, 1];
            } else {
              currentVal.value = 0;
            }
          } else {
            // 如果是范围解析JSON成数组
            // eslint-disable-next-line no-lonely-if
            if (range) {
              currentVal.value = JSON.parse(newVal as string);
            } else {
              currentVal.value = Number(newVal) as number;
            }
          }
        }
      },
      { immediate: true },
    );

    // 计算文本显示值
    const textVal = computed(() => {
      const tempCurVal = Number(currentVal.value);
      const value = Number(tempCurVal / max);
      const formatValue = ibiz.util.text.format(`${value}`, format);
      return formatValue;
    });

    const handleChange = (currentValue: number | undefined | Array<number>) => {
      if (Array.isArray(currentValue)) {
        emit('change', JSON.stringify(currentValue));
      } else {
        emit('change', currentValue);
      }
    };

    // 聚焦失焦事件
    const { componentRef: editorRef } = useFocusAndBlur(
      () => emit('focus'),
      () => emit('blur'),
    );

    return {
      ns,
      currentVal,
      handleChange,
      step,
      max,
      min,
      showStops,
      range,
      showInput,
      editorRef,
      showText,
      textVal,
      showFormDefaultContent,
    };
  },
  render() {
    return (
      <div
        class={[
          this.ns.b(),
          this.readonly ? this.ns.m('readonly') : '',
          this.showText ? this.ns.e('text') : '',
          this.ns.is('show-default', this.showFormDefaultContent),
        ]}
        ref='editorRef'
      >
        <el-slider
          v-model={this.currentVal}
          disabled={this.disabled || this.readonly}
          step={this.step}
          max={this.max}
          min={this.min}
          showStops={this.showStops}
          range={this.range}
          showInput={this.showInput}
          onChange={this.handleChange}
          {...this.$attrs}
        ></el-slider>
        {this.showText ? (
          <span class={[this.ns.em('text', 'val')]}>{this.textVal}</span>
        ) : null}
      </div>
    );
  },
});
